<template>
  <div class="Dtabar">
    <div class="Dtabar-left">
      <div>
        <img
          src="../../../assets/images/detali-tapbar/客服.svg"
          alt=""
          class="icon-serve"
        />
        <span>客服</span>
      </div>
      <div>
        <img
          src="../../../assets/images/detali-tapbar/店铺.svg"
          alt=""
          class="icon-shop"
        />
        <span>店铺</span>
      </div>
      <div>
        <img
          src="../../../assets/images/detali-tapbar/收藏.svg"
          alt=""
          class="icon-floow"
        />
        <span>收藏</span>
      </div>
    </div>
    <div class="Dtabar-right">
      <div class="cart" @click="addcart">加入购物车</div>
      <div class="buy">立即购买</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DdataTabar",
  methods:{
    addcart(){
      this.$emit('addcart')
      console.log("子组件点击")
    },
  },
};
</script>
 
<style scoped>
.Dtabar {
  height: 20vw;
  position: fixed;
  bottom: 0;
  background-color: #f5f5f5;
  display: flex;
  text-align: center;
  width: 100%;
  color: #333333;
  font-weight: bold;
  justify-content: space-evenly;
  font-size: 4.5vw;
  z-index: 9;
}
.Dtabar img {
  width: 7vw;
  height: 7vw;
  padding-left: 5vw;
  padding-top: 3vw;
}
.Dtabar-left {
  display: flex;
  width: 50%;
}
.Dtabar-left div {
  display: grid;
  width: 100%;
}
.Dtabar-right {
  /* display: flex; */
  line-height: 10vw;
  justify-content: space-around;
  width: 38%;
  /* display: grid; */
}
.cart {
  background: #999999;
  border-radius: 1vw;
  border-top-left-radius: 10vw;
}
.buy {
  background: #ffffff;
  border-radius: 1vw;
  border-bottom-right-radius: 10vw;
}
</style>